<template>
  <el-dialog
    :visible.sync="showDialog"
    :title="$t('采购记录')"
    width="90%"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <div class="app-container">
      <!-- *************************************搜索区************************************* -->
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="90px">
        <el-form-item :label="$t('商家名称')" prop="skuNo">
          <el-input v-model="queryParams.name" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item :label="$t('商家地址')" prop="address">
          <el-input v-model="queryParams.address" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
            {{ $t('搜索') }}
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 增删改查 -->
      <el-row :gutter="10" class="mb8"> </el-row>
      <el-table :height="calTableHeight() - 100" v-loading="loading" :data="tableData" row-key="menuId">
        <!-- sku -->
        <el-table-column align="center" show-overflow-tooltip prop="skuNo" :label="$t('sku编号')" />

        <el-table-column align="center" show-overflow-tooltip prop="spNo" :label="$t('库位号')" />

        <el-table-column align="center" show-overflow-tooltip prop="num" :label="$t('采购数量')" />
        <el-table-column align="center" prop="imgUrl" :label="$t('图片')">
          <template slot-scope="{ row }">
            <el-image
              style="width: 50px; height: 50px"
              fit="contain"
              :key="Math.random()"
              v-hover="row.imgUrl"
              :src="row.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="skuNameCn" :label="$t('品名')" />
        <el-table-column align="center" show-overflow-tooltip prop="deliverWayCn" :label="$t('国内发货方式')">
          <template slot-scope="{ row }">
            <span>{{ handleDeliveGood(row.deliverWayCn) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="totalStock" :label="$t('在库数量')" />
        <el-table-column align="center" show-overflow-tooltip prop="cloudStock" :label="$t('云数量')" />
        <el-table-column width="180" align="center" show-overflow-tooltip prop="createTime" :label="$t('采购日期')" />
        <el-table-column align="center" show-overflow-tooltip prop="type" :label="$t('采购类型')">
          <template slot-scope="{ row }">
            <!-- 采购类型 1-国内采购 2-酒水采购 3-日本当地采购 -->
            <div :style="{ color: $randomColor(row.type) }">{{ handleType(row.type) }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="payPrice" :label="$t('总价')">
          <template slot-scope="{ row }">
            <div>
              {{ row.payPrice }}
            </div>
            <div :style="handlePriceUnit(row.payPriceUnit).style">
              {{ handlePriceUnit(row.payPriceUnit).name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="skuTotalValue" :label="$t('总货值')">
          <template slot-scope="{ row }">
            <div>{{ row.skuTotalValue }}</div>
            <div style="color: orange">1</div>
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="skuUnitPrice" :label="$t('单价')">
          <template slot-scope="{ row }">
            <div>{{ row.skuUnitPrice }}</div>
            <div style="color: orange">JPY</div>
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="receiveGoodsNum" :label="$t('收货数量')" />
        <el-table-column align="center" show-overflow-tooltip prop="encasementNum" :label="$t('装箱数量')" />
        <el-table-column align="center" show-overflow-tooltip prop="transportNum" :label="$t('出运数量')" />
        <el-table-column align="center" show-overflow-tooltip prop="hitShelfNum" :label="$t('上架数量')" />
        <el-table-column align="center" show-overflow-tooltip prop="purchaseRemark" :label="$t('备注')" />
        <el-table-column align="center" show-overflow-tooltip prop="isSerializable" :label="$t('是否分配序列号')">
          <template slot-scope="{ row }">
            <div style="color: #13ce66" v-if="row.isSerializable">{{ $t('已分配') }}</div>
            <div v-else>{{ $t('未分配') }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" :label="$t('操作')">
          <template slot-scope="{ row }">
            <el-button
              style="margin: 0 15px"
              type="text"
              size="small"
              v-hasPermi="['distribution:purchase:info']"
              @click="handleDetail(row.id)"
            >
              {{ $t('详情') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="pageTotal > 0"
        :total="pageTotal"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <!-- 详情 -->
      <el-dialog
        style="scale: 0.9"
        v-if="detailInfo.show"
        :visible.sync="detailInfo.show"
        :title="$t('详情')"
        append-to-body
        width="800px"
        destroy-on-close
        :close-on-click-modal="false"
      >
        <el-form ref="saveForm" :model="detailInfo.form" label-width="120px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="sku">
                <el-input disabled v-model="detailInfo.form.skuNo" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('库位号')">
                <el-input disabled v-model="detailInfo.form.spNo" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item :label="$t('图片')">
                <el-image
                  style="width: 60px; height: 60px; object-fit: cover"
                  lazy
                  class="goods-img-mini"
                  :src="detailInfo.form.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item :label="$t('采购数量')" prop="num">
                <el-input disabled v-model="detailInfo.form.num" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item :label="$t('品名')">
                <el-input disabled v-model="detailInfo.form.spNo" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('国内发货方式')">
                <!-- <el-input disabled v-model="detailInfo.form.deliverWayCn" /> -->
                <el-select style="width: 100%" disabled v-model="detailInfo.form.deliverWayCn">
                  <el-option
                    v-for="item in deliver_goods_cn_list"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                    :key="item.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item :label="$t('在库数量')">
                <el-input disabled v-model="detailInfo.form.totalStock" />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="云数量">
                <el-input disabled v-model="detailInfo.form.cloudStock" />
              </el-form-item>
            </el-col> -->
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item :label="$t('采购日期')">
                <el-input disabled v-model="detailInfo.form.createTime" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('采购类型')">
                <!-- <el-input disabled v-model="detailInfo.form.type" /> -->
                <el-select style="width: 100%" disabled v-model="detailInfo.form.type">
                  <el-option
                    v-for="item in purchase_type_list"
                    :label="item.dictLabel"
                    :value="+item.dictValue"
                    :key="item.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item :label="$t('付款总额')" prop="payPrice">
                <el-input disabled style="width: 100%" v-model="detailInfo.form.payPrice">
                  <!-- 付款总价单位 1-RMB 2-JPY 3-USD -->
                  <el-button slot="append">
                    <el-select disabled style="width: 100px" v-model="detailInfo.form.payPriceUnit">
                      <el-option label="RMB" :value="1" />
                      <el-option label="JPY" :value="2" />
                      <el-option label="USD" :value="3" />
                    </el-select>
                  </el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('总货值')">
                <el-input disabled v-model="detailInfo.form.skuTotalValue">
                  <template slot="suffix">JPY</template></el-input
                >
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item :label="$t('单价')">
                <el-input disabled v-model="detailInfo.form.skuUnitPrice">
                  <template slot="suffix">JPY</template></el-input
                >
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('收货数量')">
                <el-input disabled v-model="detailInfo.form.receiveGoodsNum" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item :label="$t('装箱数量')">
                <el-input disabled v-model="detailInfo.form.encasementNum" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('出运数量')">
                <el-input disabled v-model="detailInfo.form.transportNum" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item :label="$t('上架数量')">
                <el-input disabled v-model="detailInfo.form.hitShelfNum" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('是否分配序列号')">
                <div style="color: #13ce66" v-if="detailInfo.form.isSerializable">{{ $t('已分配') }}</div>
                <div style="color: orange" v-else>{{ $t('未分配') }}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item :label="$t('备注')">
                <el-input type="textarea" :rows="4" disabled v-model="detailInfo.form.purchaseRemark" />
              </el-form-item>
            </el-col>
            <el-col :span="12"> </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="detailInfo.show = false">{{ $t('关闭') }}</el-button>
        </div>
      </el-dialog>
    </div>
  </el-dialog>
</template>

<script>
import { getPurchaseInfo, getPurchaseListByDistributor } from '@/api/purchasingManage/manufacturerPurchaseOrder'
import { useDict } from '@/utils/useDict'
export default {
  name: 'PurchaseRecordddd',
  components: {},
  data() {
    return {
      title: '',
      /**发货方式 */
      deliver_goods_cn_list: [],
      /**采购类型 */
      purchase_type_list: [],
      tableData: [],
      showDialog: false,
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        skuId: '',
      },
      /**详情 */
      detailInfo: {
        show: false,
        form: {},
      },
    }
  },
  created() {
    useDict('deliver_goods_cn').then(({ deliver_goods_cn }) => {
      this.deliver_goods_cn_list = deliver_goods_cn
    })
    useDict('purchase_type').then(({ purchase_type }) => {
      this.purchase_type_list = purchase_type
      //console.log(`this.purchase_type_list ==>`, this.purchase_type_list)
    })
  },

  methods: {
    handleType(type) {
      const index = this.purchase_type_list.findIndex((i) => i.dictValue == type)
      return this.purchase_type_list[index]?.dictLabel
    },
    handleOpen({ title, skuId }) {
      this.title = title
      this.queryParams.skuId = skuId
      this.getList()
      this.showDialog = true
    },
    handlePriceUnit(id) {
      // <!-- 付款总价单位 1-RMB 2-JPY 3-USD -->
      if (id == 1) {
        return {
          name: 'RMB',
          style: 'color:red;',
        }
      }
      if (id == 2) {
        return {
          name: 'JPY',
          style: 'color:blue;',
        }
      }
      if (id == 3) {
        return {
          name: 'USD',
          style: 'color:green;',
        }
      }
      return {
        name: '',
        style: '',
      }
    },

    handleDeliveGood(type) {
      // const name = this.deliver_goods_cn_list.filter((i) => i.dictValue == value)
      // if (name && name.length > 0) {
      //   return name[0].dictLabel
      // }
      // return ''
      const index = this.deliver_goods_cn_list.findIndex((i) => i.dictValue == type)
      return this.deliver_goods_cn_list[index]?.dictLabel
    },

    relaod() {
      this.getList()
    },
    handleDetail(id) {
      console.log(` ==>`, id)
      getPurchaseInfo(id).then((res) => {
        this.detailInfo.show = true
        this.detailInfo.form = JSON.parse(JSON.stringify(res.data))
      })
    },

    /** 查询菜单列表 */
    getList() {
      this.loading = true
      getPurchaseListByDistributor(this.queryParams).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped></style>
